<template>
    <div class="app-container">
      <el-card class="box-card">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          border
          class="mt-3"
          stripe
          style="width: 100%"
          tooltip-effect="dark"
        >
          <!-- <el-table-column label="活动状态" prop="is_open">
            <template slot-scope="{row}">
              <span v-if="row.is_open === 1">进行中</span>
              <span v-if="row.is_open === 2">关闭中</span>
            </template>
          </el-table-column> -->
          <el-table-column label="奖池名称" prop="name"></el-table-column>
          <el-table-column label="奖池奖品数量" prop="prize_count"></el-table-column>
          <el-table-column label="奖池抽奖次数" prop="count"></el-table-column>
          <el-table-column label="投入" prop="input"></el-table-column>
          <el-table-column label="产出" prop="output"></el-table-column>
          
          <el-table-column label="操作" width="300px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleCheck(scope.row)"
              >查看
              </el-button>
              
              <!-- <el-button
                size="mini"
                type="text"
                @click="handleStatus(scope.row)"
              >修改状态
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getTableData"
        />
      </el-card>
  
      <el-dialog
        :visible.sync="dialogVisible"
        title="修改状态"
        width="30%"
        @close="closeDialog('form')"
      >
        <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="120px" size="normal">
          <el-form-item label="摩卡水晶状态" prop="status">
            <el-select v-model="formData.status" >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          
        </el-form>
  
        <span slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditStatus">确定</el-button>
        </span>
      </el-dialog>
  
    </div>
</template>
  
<script>
    import { gameLotteryLadderPool, gameLotteryLadderPoolStatus } from '@/api/compositeManagement'
  
    export default {
        name: 'gamePoolConfig',
        components: {},
        data() {
        return {
            dialogVisible: false,
            formData: {
                status: undefined
            },
            rules: {
                status: [{ required: true, message: '请选择摩卡水晶状态', trigger: 'blur' }]
            },
            rowId: '',
            loading: false,
            tableData: [],
            listQuery: {
                page: 1,
                perPage: 10
            },
            total: 1,
            statusList: [
                {
                    label: '进行中',
                    value: 2
                },
                {
                    label: '测试中',
                    value: 1
                },
                {
                    label: '关闭',
                    value: 0
                }
            ]
        }
    },
    created() {
        this.getTableData()
    },
    methods: {
        onSubmit() {
            this.$refs['newHeadlines'].validate(valid => {
                if (valid) {
        
                }
            })
        },
    
        // 网络请求
        /**
         * getTableData
         * @desc 获取表格数据
         */
        async getTableData() {
            this.loading = true
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            const detail = await gameLotteryLadderPool(this.listQuery)
            if (detail.code === 200) {
                this.tableData = detail.data
                this.listQuery.page = detail.data.current_page
                // this.total = detail.data.total
            }
            this.loading = false
    
        },
        addSubmit() {
            
        },
        closeDialog(form) {
            if (this.$refs[form]) {
                // this.formData.status = undefined
                this.$refs[form].clearValidate() // 清除整个表单的校验
                this.$refs[form].resetFields() // 清除整个表单的校验
            }
        },
        handleCheck(row) {
            this.$router.push({
                path: 'gameGiftConfig',
                query: {
                    pool_id: row.id
                }
            })
        },
        handleStatus(row) {
            if(row.is_open == 1) {
                this.$confirm('确定关闭该奖池？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    gameLotteryLadderPoolStatus({
                        id: row.id,
                        is_open: 2
                    }).then(res => {
                        if(res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                        }
                        this.dialogVisible = false
                        this.getTableData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }else {
                this.$confirm('确定开启该奖池？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    gameLotteryLadderPoolStatus({
                        id: row.id,
                        is_open: 1
                    }).then(res => {
                        if(res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                        }
                        this.dialogVisible = false
                        this.getTableData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        },
        handleEditStatus() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if(this.formData.status === 1) {
                        this.$prompt('请输入测试人员ID：', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^[0-9]/,
                            inputErrorMessage: '请输入正确的测试人员ID'
                        }).then(({value}) => {
                            editStatus({
                                state: this.formData.status,
                                test_users: value
                            },this.rowId).then(res => {
                                if(res.code === 200) {
                                    this.dialogVisible = false
                                    this.getTableData()
                                }
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '取消输入'
                            });       
                        });
                    }else {
                        editStatus({state: this.formData.status},this.rowId).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.getTableData()
                            }
                        })
                    }
                    
                } else {
                    return false
                }
            })
        }
    }
}
</script>
  
<style lang="scss" scoped>

</style>
  